<template>
  <div>
    <div
      class="chart-wrapper"
      ref="chartBox"
      v-show="chartData.length > 0"
      style="width: 100%"
      :style="{ height: (isFullscreen ? hHeight : 220) + 'rem' }"
    ></div>
    <el-empty
      description="暂无数据"
      v-show="chartData.length == 0"
      :image-size="60"
      style="height: 210rem"
    />
  </div>
</template>

<script setup>
import { onBeforeUnmount, onMounted, ref, watch, nextTick } from "vue";
import * as echarts from "echarts";
import { debounce, nowSize } from "@/utils/util.js";
import { ElLoading, ElMessage } from "element-plus";
import screenfull from "screenfull";
const hHeight = ref(0);
const isFullscreen = ref(false);

const chartBox = ref();
let myChart = ref(null);
const colorList = ref([
  "#4962FC",
  "#4B7CF3",
  "#dd3ee5",
  "#12e78c",
  "#fe8104",
  "#01C2F9",
  "#F4CB29",
  "#FD9E06",
  "#cff399",
  "#fcd4d5",
  "#6291e3",
  "#89caf2",
  "#bdf5e8",
  "#9cf7b4",
  "#b5bfd8",
  "#3ea7ea",
]);

// 传入数据¸
const props = defineProps({
  chartData: {
    type: Array,
    default: [],
  },
  seriesDataList: {
    type: Array,
    default: [],
  },
  currentColorList: {
    type: Array,
    default: [],
  },
  keyList: Array, // 显示值的参数
  xAxisName: String, // 横坐标名称
  option: Object,
  chartType: {
    type: Array,
    default: [{ type: "bar", name: "value" }],
  }, // 显示几个图
  orient: {
    type: String,
    default: "horizontal",
  },
  linerColor: {
    type: [String, Array],
    default: ["#11100e", "#11100e"],
  },
  unit: {
    type: Array,
    default: ["件", "元"],
  },
  twoYAxis: Boolean,
});

const resizeHandler = debounce(() => {
  if (myChart) {
    myChart.resize();
  }
}, 200);

onMounted(() => {
  setTimeout(() => {
    if (props.chartData.length == 0) return;
    getChartData();
  }, 1000);
  isFullscreenFn();
  window.addEventListener("resize", resizeHandler);
  window.addEventListener("resize", isFullscreenFn);
  nextTick(() => {
    hHeight.value = document.documentElement.clientHeight - 860;
    // console.log(document.documentElement.clientHeight, hHeight.value)
  });
});

onBeforeUnmount(() => {
  window.removeEventListener("resize", resizeHandler);
  window.removeEventListener("resize", isFullscreenFn);
});

watch(
  () => props.chartData,
  (newVal, oldVal) => {
    getChartData();
  }
);

const isFullscreenFn = () => {
  // 利用屏幕分辨率和window对象的内高度来判断兼容IE
  let winFlag = window.innerHeight === window.screen.height;
  // 利用window全屏标识来判断 -- IE无效
  let isFull = window.fullScreen || document.webkitIsFullScreen;

  if (isFull === undefined) {
    isFullscreen.value = winFlag;
  } else {
    isFullscreen.value = winFlag || isFull;
  }
  // console.log('1111111', winFlag);  // true全屏   false不是全屏
};

const getChartData = () => {
  let seriesData = [];
  let xAxisList = [];
  let legendList = [];
  props.chartData.forEach((t, v) => {
    xAxisList.push(t.name);
  });
  console.log("seriesDataList", props.currentColorList);
  let seriesList = props.seriesDataList;
  for (let index = 0; index < seriesList.length; index++) {
    const element = seriesList[index];
    let itemDate = [];
    props.chartData.forEach(function (t, v) {
      itemDate.push(t[element]);
    });
    seriesData.push({
      name: element,
      type: "bar",
      stack: "total",
      smooth: true,
      data: itemDate,
      showSymbol: false,
      label: {
        show: true,
        color: "#fff",
        fontSize: nowSize(10),
      },
      // symbol: "emptyCircle",
      // symbolSize: 6,
      avoidLabelOverlap: true,
      barWidth: nowSize(25), //柱图宽度
      itemStyle: {
        color: props.currentColorList[index],
      },
      yAxisIndex: 0,
    });
  }

  nextTick(() => {
    initEcharts(legendList, xAxisList, seriesData);
  });
};

const initEcharts = (legendList, xAxisList, seriesData) => {
  myChart = echarts.init(chartBox.value);
  let option = {
    grid: {
      top: "13%",
      left: "0%",
      right: "4%",
      bottom: "12%",
      containLabel: true,
    },
    tooltip: {
      trigger: "axis",
      formatter: function (params) {
        let txt = "";
        txt = params[0].name;
        params.forEach((item, index) => {
          if (item.data) {
            txt =
              txt +
              `<div style="display: flex;flex-direction: row;justify-content: space-between;margin-top:1rem;">` +
              `<div style="margin-right: 30rem">` +
              `<span style="display: inline-block;width: 10rem;height: 10rem;border-radius: 50%;background: ${
                props.currentColorList[item.seriesIndex]
              };margin-right: 2rem"></span>` +
              params[index].seriesName +
              `</div>` +
              `<div>` +
              item.data +
              `</div>` +
              `</div>`;
          }
          // console.log(item)
        });
        return txt;
        // return '<div>' + params[0].name + '<br>' + params[0].marker + params[0].seriesName + ':' + '<span style="color: #00B83F;">' + params[0].value + '</span>MHZ' + '</div>';
      },
    },
    legend: {
      bottom: "1%",
      data: legendList,
      icon: "circle",
      itemWidth: nowSize(10),
      itemHeight: nowSize(10),
      textStyle: {
        color: "#7da0ca",
      },
    },
    yAxis: {
      type: "category",
      name: props.unit[0],
      nameTextStyle: {
        color: "#7da0ca",
        fontSize: nowSize(12),
        padding: [8, 0],
      },
      data: xAxisList,
      // boundaryGap: false,
      axisLabel: {
        show: true,
        color: "#7da0ca",
        fontSize: nowSize(12),
        fontWeight: "bold",
      },
      axisLine: {
        lineStyle: {
          color: "#dbdfe3",
        },
      },
    },
    xAxis: [
      {
        type: "value",
        splitLine: {
          lineStyle: {
            width: nowSize(1),
            type: "dashed",
          },
        },
        axisLabel: {
          show: true,
          color: "#7da0ca",
          fontSize: nowSize(12),
          fontWeight: "bold",
        },
        position: "top",
      },
    ],
    series: seriesData,
  };
  if (props.option) {
    option = Object.assign(option, props.option);
  }
  myChart.off("click");
  // myChart.on("click", function (params) {
  //     that.$emit("clickEchartIns", params); // 所选参数
  // });
  myChart.setOption(option, true);
};
</script>

<style scoped lang="less"></style>
